Ext.ns("sh.mytool.cv.module");

sh.mytool.cv.module.VideoPanel = Ext.extend(Ext.Panel, {
    pageSize: 12,
    queryUrl: "",
    getUrl : "",
    editUrl : "",
    removeUrl: "",
    videoRoot: "",
    imageRoot: "",
    layout: "fit",
    power: "",
    initComponent : function() {
        this.store = new Ext.data.JsonStore({
            autoDestroy : true,
            proxy : new Ext.data.HttpProxy({
                method : 'post',
                url : this.queryUrl
            }),
            root : 'resultList',
            idProperty : 'id',
            totalProperty : 'totalRecord',
            fields : [
                {name: 'id'},
                {name: 'name'},
                {name: 'imageUrl', mapping: 'videoImage', convert: function(v) {
                    if(v){
                        return v.path.replace(/\\/g, "/");
                    }else{
                        return "";
                    }
                }},
                {name: 'videoUrl', mapping: 'videoFile', convert: function(v) {
                    if(v){
                        return v.path.replace(/\\/g, "/");
                    }else{
                        return "";
                    }
                }},
            ],
            remoteSort : true
        });
        this.store.load({
            params: {start: 0, limit: this.pageSize}
        });
        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><img src="' + this.imageRoot + '{imageUrl}" title="{name}"><div class="play_btn"></div></div>',
                    '<span class="x-editable">{shortName}</span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );
        this.dataView = new Ext.DataView({
            autoScroll: true,
            store: this.store,
            tpl: tpl,
            autoHeight: true,
            singleSelect: true,
            overClass: 'x-view-over',
            itemSelector: 'div.thumb-wrap',
            loadingText: "Please wait...",
            emptyText: 'No video to display',
            style: 'border: 0',
            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 25);
                return data;
            },
            listeners: {
                render: function() {
                    // After the component has been rendered, disable the default browser context menu
                    Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
                }
//                dblclick: function(view, index, node, e) {
//                    var selNode = view.getSelectedRecords();
//                    this.playVideo(selNode[0].data);
//                }
            }
        });
        this.tbar = [
            {text: "Add", handler: this.toAdd, scope: this, hidden: this.power.hidden},
            {text: "Modify", handler: this.toModify, scope: this, hidden: this.power.hidden},
            {text: "Remove", handler: this.toRemove, scope: this, hidden: this.power.hidden}
        ],
        this.bbar = new Ext.PagingToolbar({
            store: this.store,
            pageSize: this.pageSize,
            displayInfo :true
        });
        sh.mytool.cv.module.VideoPanel.superclass.initComponent.call(this);
        // show video
        this.dataView.on("dblclick", function(view, index, node, e) {
            view.select(node);
            this.playVideo();
        }, this);
        // get wiki link
        this.dataView.on("contextmenu", function(view, index, node, e){
            view.select(node);
            if(!this.cmenu){
                this.cmenu = new Ext.menu.Menu({
                    items : {
                        text : 'Wiki Link',
                        scope : this,
                        handler : this.getWikiLink
                    }
                });
            }
            this.cmenu.showAt(e.getXY());
            e.stopEvent();
        }, this);
        this.add(this.dataView);
    },
    getWikiLink: function(){
        var data = this.getSelectData();
        var wikiLink = "<wiki:video url='"+ this.videoRoot + data.videoUrl + "' height='400' width='600'></wiki:video>";
        alert(wikiLink);
    },
    playVideo: function(){
        var data = this.getSelectData();
        if(!this.playWin){
            this.playWin = new Ext.Window({
                title: data.name,
                modal: true,
                closeAction: "hide",
                layout: "fit",
                items: new Ext.Panel({
                    border: false
                }),
                listeners:{
                    hide: function(){
                        Ext.get("myframe").remove();
                    }
                }
            });
        }
        // hide 删除iframe ext get remove ?
        var html = '<iframe id="myframe" scrolling="no" frameborder="0" width="640" height="360" src="'+ this.videoRoot + data.videoUrl +'"></iframe>';
//        var html = "<video controls='controls' scr='" + this.videoRoot + data.videoUrl + "' width='640' height='360' preload='auto'></video>";
        var panel = this.playWin.getComponent(0);
        if (panel.body) {
            panel.body.update(html);
        } else {
            panel.html = html;
        }
//        this.playWin.autoLoad = this.videoRoot + data.videoUrl;
        this.playWin.doLayout(true);
        this.playWin.show();
    },
    getEditWin : function() {
        if (!this.win) {
            var formPanel = new Ext.form.FormPanel({
                labelAlign : "right",
                labelWidth : 50,
                border : false,
                layout : "form",
                method : "post",
                fileUpload: true,
                items : [ {
                    height : 15,
                    border : false
                }, {
                    xtype : "hidden",
                    name : "id"
                }, {
                    xtype : "textfield",
                    fieldLabel : "name",
                    name : "name"
                }, {
                    xtype : "textfield",
                    fieldLabel : "image",
                    inputType : "file",
                    name : "image"
                }, {
                    xtype : "textfield",
                    fieldLabel : "video",
                    inputType : "file",
                    name : "video"
                } ],
                buttonAlign : "center",
                buttons : [ {
                    text : "Save",
                    scope : this,
                    handler : this.submitForm
                },
                {
                    text : "Close",
                    scope : this,
                    handler : function() {
                        this.win.hide();
                    }
                } ]
            });
            this.win = new Ext.Window({
                title : "Edit Video",
                width : 400,
                height : 250,
                closeAction : 'hide',
                modal : true,
                layout : 'fit',
                closeAction: "hide",
                items : [ formPanel ]
            });
        }
    },
    toAdd : function() {
        this.getEditWin();
        this.cleanForm();
        // setHidden
        this.win.show();
    },
    toModify : function() {
        this.getEditWin();
        this.cleanForm();
        this.loadForm();
        this.win.show();
    },
    toRemove : function() {
        Ext.Msg.confirm("Tip", "Delete Video?", function(btn) {
            if (btn == "yes") {
                var id = this.getSelectData().id;
                var wartMsg = Ext.Msg.wait("", "Please Wait...");
                Ext.Ajax.request({
                    url : this.removeUrl,
                    params : {
                        id : id
                    },
                    method : "post",
                    async : false,
                    scope : this,
                    success : function(resp, opts) {
                        wartMsg.hide();
                        Ext.Msg.alert("Tip", "Success!");
                        this.toRefresh();
                    },
                    failure : function(resp, opts) {
                        wartMsg.hide();
                        Ext.Msg.alert("Tip", "Failed!");
                    }
                });
            }
        }, this);
    },
    toRefresh : function() {
        this.store.reload();
    },
    getSelectData: function(){
        var selNode = this.dataView.getSelectedRecords();
        return selNode[0].data;
    },
    cleanForm : function() {
        this.win.getComponent(0).getForm().reset();
    },
    loadForm : function() {
        var id = this.getSelectData().id;
        this.win.getComponent(0).getForm().load({
            url : this.getUrl,
            params : {
                id : id
            },
            method : "post",
            waitMsg : "",
            success : function(form, action) {
            },
            failure : function(form, acition) {
            }
        });
    },
    submitForm : function() {
        this.win.getComponent(0).getForm().submit({
            url : this.editUrl,
            scope : this,
            waitMsg : "",
            success : function(form, action) {
                this.win.hide();
                Ext.Msg.alert("Tip", "Success!");
                this.toRefresh();
            },
            failure : function(form, acition) {
                Ext.Msg.alert("Tip", "Failed!");
            }
        });
    }
});
